//@ts-nocheck
import React, { useEffect, useImperativeHandle } from 'react'

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/bar'
import { Option, ChartsInstance } from '../Bar/interface'

import './index.less'

let echartsInstance: any
let data: Array<Option> = []

interface IProps {
  chartId?: string
  options?: Array<Option>
  chartRef?: React.MutableRefObject<ChartsInstance>
  seriesName?: string
  data?: any
}

const ReverseCrossBarChart: React.FC<IProps> = ({ options, chartId, chartRef, seriesName = '', data }) => {
  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId || 'strip-cross-bar-chart'))
    setOptions()
  }, [])

  useEffect(() => {
    data = options
    if (echartsInstance) setOptions()
  }, [options])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = () => {
    let charList = []
    data?.xContentInfoVos?.map((xItem) => {
      if (xItem.content !== '总计') {
        let xCharData = data?.yContentInfoVos?.map((yItem) => {
          // let chartData = []
          let chartItem = data?.statisticsInfoVos.filter((filterItem) => {
            return filterItem.yKey === yItem.key && filterItem.xKey === xItem.key
          })[0]
          return parseFloat(chartItem.proportion)
        })
        charList.push([xItem.content, ...xCharData])
        return null
      } else {
        return null
      }
    })

    echartsInstance.setOption({
      type: 'scroll',
      legend: {
        data: data?.yContentInfoVos
          ?.map((item) => {
            if (item.content !== '总计') {
              return item.content
            } else {
              return null
            }
          })
          .filter((item) => item !== null),
        bottom: 0
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          textStyle: {
            // color: '#fff',// 坐标值得具体的颜色
          },
          formatter: function (params) {
            let newParamsName = '' // 最终拼接成的字符串
            let paramsNameNumber = params.length // 实际标签的个数
            let provideNumber = 3 // 每行能显示的字的个数
            let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 计算行数，向上取整
            // 判断是否需要换行
            if (paramsNameNumber > provideNumber) {
              // 循环得到每行的显示内容，p代表行
              for (let p = 0; p < rowNumber; p++) {
                let tempStr = '' // 表示每一次截取的字符串
                let start = p * provideNumber // 开始截取的位置
                let end = start + provideNumber // 结束截取的位置
                if (p === rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params
            }

            return newParamsName
          },
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            // color: '#fff',// 坐标值得具体的颜色
          },
          formatter: function (params) {
            let newParamsName = '' // 最终拼接成的字符串

            newParamsName = params + '%'

            return newParamsName
          },
          interval: 0
        }
      },
      dataset: {
        source: charList
      },
      series: data?.yContentInfoVos
        ?.map((item) => {
          if (item.content !== '总计') {
            return { type: 'bar', stack: 'total', name: item.content }
          } else {
            return null
          }
        })
        .filter((item) => item !== null),
      tooltip: {
        // 提示框组件
      },
      toolbox:{
        show:false
      }
    })
  }

  return <div className="strip-cross-bar-chart" id={chartId || 'strip-cross-bar-chart'} />
}
export default (ReverseCrossBarChart)
